<template>
  <div class="product-page">
    <PageContainer title="产品列表" back no-tab>
      <div class="container-wrapper">
        <SearchModule @search="onSearch"></SearchModule>

        <div id="product-page-main-container" class="main-container">
          <ProduceList
            v-if="containerHeight"
            :height="containerHeight"
            listApi="/api/erp/erpCategoryTreeRelate/list"
            :extParams="{
              categoryId: categoryId,
              name: searchText,
            }"
          >
          </ProduceList>
        </div>
      </div>
    </PageContainer>
  </div>
</template>

<script setup>
import {ref, getCurrentInstance, onMounted} from 'vue';
import PageContainer from '@/components/PageContainer/index.vue';
import ProduceList from '@/components/ProductList/index.vue';
import SearchModule from '@/components/SearchModule/index.vue';
import {useRouter} from '@/hooks/useRouter.ts';

const {getPageQuery, push} = useRouter();
const containerHeight = ref(0);
const instance = getCurrentInstance();
const initHeight = () => {
  const query = uni.createSelectorQuery().in(instance?.proxy);
  query
    .select(`#product-page-main-container`)
    .boundingClientRect((result) => {
      if (result?.height) {
        containerHeight.value = result.height;
      } else {
        console.log('error', '-> ', instance);
      }
    })
    .exec();
};
onMounted(initHeight);

// 搜索
const searchText = ref('');
const onSearch = (data) => {
  searchText.value = data;
};

const categoryId = ref('');
onMounted(() => {
  const queryData = getPageQuery();
  categoryId.value = queryData.id;
  initHeight();
});
</script>

<style lang="less" scoped>
.product-page {
  .container-wrapper {
    margin: auto;
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .main-container {
      margin-top: 10px;
      flex: 1;
    }
  }
}
</style>
